<template>
  <div class="orderData flex-col justify-center items-center">
    <div class="list flex-col">
      <div
        v-for="(item, index) in data"
        :key="index"
        class="order-item flex-col bg-white"
      >
        <div class="title items-center">
          <img :src="item.storeLogo" alt="" class="logo" />
          <span class="store-name"
            >{{ item.storeName }}
            <img
              src="../../../static/icones/orderlist1.png"
              alt=""
              class="arrow"
          /></span>
          <span class="status">{{ item.status | changeStatus }}</span>
        </div>
        <div class="content flex" @tap="goOrderDrtail(item.id)">
          <div class="left justify-center items-center">
            <img :src="item.coverUrl" alt="" class="pic" mode="aspectFit" />
          </div>
          <div class="right flex-col">
            <p class="goods-title ellipsis_1">
              {{ item.goodsName }}
            </p>
            <span v-if="item.specName" class="spec"
              >套餐:{{ item.specName }}</span
            >
            <div class="specss">
              <span class="rang-date spec"
                >租期:{{ item.startEndTimeString }}</span
              >
              <span class="num spec">X{{ item.num }}</span>
            </div>
          </div>
        </div>
        <div class="ping-tag">
          <img src="../../../static/icones/tag1.png" alt="" />
        </div>
        <div class="ping-tag">
          <img src="../../../static/icones/tag2.png" alt="" />
        </div>
        <div class="ping-tag">
          <img src="../../../static/icones/tag3.png" alt="" />
        </div>

        <div class="pingtai">
          <div class="pingtai-lf">
            <div class="lf-img">
              <img src="../../../static/icones/orderlist22.png" alt="" />
            </div>
            <div class="lfserve">平台介入</div>
          </div>
          <div class="pingtai-ri">
            <div class="all-rang items-center">
              总租金:￥{{ item.allRentFee || 0 }}（{{ item.rentStage }}期）
            </div>
          </div>
        </div>
        <div class="action items-center">
          <div class="btns items-center justify-end">
            <span
              v-if="[1].includes(item.status)"
              class="btn"
              @tap.stop="phone('4000850889', 'platform')"
              >客服</span
            >
            <!-- <span
              v-if="[0, 3, 10, 11].includes(item.status)"
              class="btn"
              @tap.stop="phone(item.storeTelphone, 'store')"
            >联系商家</span> -->
            <span
              v-if="false"
              class="btn"
              @tap.stop="phone(item.storeTelphone, 'store')"
              >联系商家</span
            >
            <span
              v-if="[0].includes(item.status)"
              class="btn"
              @tap.stop="pay(item)"
              >去免押</span
            >
            <span
              v-if="[1, 2].includes(item.status)"
              class="btn"
              @tap.stop="auth(item)"
              >认证信息</span
            >
            <span
              v-if="[1].includes(item.status)"
              class="btn big"
              @tap.stop="sign(item)"
              >租赁合同签名</span
            >
            <view class="btn" @tap.stop="returnGoods(item)">归还</view>
            <view class="btn" @tap.stop="rerentGoods(item)">续租</view>
            <view class="btn" @tap.stop="buyoutGoods(item)">买断</view>
            <view class="btn" @tap.stop="billDetailGoods(item)">账单详情</view>
            <view class="btn" @tap.stop="commentList(item)">去评价</view>
            <view class="btn" @tap.stop="buyoutDescriptionTap(item)"
              >买断说明</view
            >
            <!-- <span
              v-if="[4, 5].includes(item.status) && item.type !== 3"
              class="btn"
              @tap.stop="buyout(item)"
              >买断{{ item.type === 2 && item.buyoutId ? "支付" : "" }}</span
            > -->
            <!-- <navigator :url="`/pagesMy/orderBuyout/index?id=${id}&type=info`">
              <span
                v-if="[4, 5, 10, 11].includes(item.status)"
                class="btn"
                @tap.stop="payDetail(item)"
                >账单详情</span
              >
            </navigator> -->
            <span
              v-if="[1, 0].includes(item.type) && item.settlementPrice > 0"
              class="btn"
              @tap.stop="settle(item)"
              >同意结算</span
            >
            <span
              v-if="[6, 7, 8].includes(item.status)"
              class="btn"
              @tap.stop="reorder(item)"
              >再次下单</span
            >
            <!-- <span
              v-if="[7].includes(item.status)"
              class="btn"
              @tap.stop="addAssess(item)"
              >去评价</span
            > -->
            <span
              v-if="[1].includes(item.status) && item.isShow"
              class="btn"
              @tap.stop="faceAuth(item, index)"
              >人脸识别</span
            >
            <view class="btn" @tap.stop="viewShow(item, index)">查看物流</view>
          </div>
        </div>
      </div>
    </div>
    <NoData v-if="data.length === 0" />

    <!-- 客服弹窗 -->
    <!-- <ServerDialog
      v-model="showServer"
      :platform-telephone.sync="platformTelephone"
      :store-telephone.sync="storeTelephone"
    /> -->

    <!-- 复制弹窗 -->
    <!-- <CopyDialog v-model="showCopy" :url.sync="url" /> -->
  </div>
</template>

<script>
// import OrderAction from "@utils/order";
// import ServerDialog from '@components/serverDialog'
// import { formatDate } from "@utils/util";
export default {
  // components: { ServerDialog },
  filters: {
    changeTime(times) {
      return formatDate(times);
    },
    changeStatus(status) {
      return {
        0: "待支付",
        1: "待审核",
        2: "待发货",
        3: "已发货",
        4: "租用中",
        5: "待归还",
        6: "已完成",
        7: "待评价",
        8: "已取消",
        10: "待完结",
        11: "归还中",
      }[status];
    },
  },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    platformTelephone: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      showServer: false,
      storeTelephone: "",
      showCopy: false,
      // url: "",
    };
  },
  methods: {
    controlServer({ storeTelphone }) {
      this.storeTelphone = storeTelphone;
      this.$nextTick(() => {
        this.showServer = true;
      });
    },
    goAliapp({ goodsId }) {
      const aliUrl = `alipays%3A%2F%2Fplatformapi%2Fstartapp%3FappId%3D2021002110607982%26page%3Dpages%252FgoodsDetail%252Findex%253Ftype%253D2%2526id%253D${goodsId}`;
      // // const url = `https://render.alipay.com/p/s/i/?scheme=${aliUrl}`
      // const url = `https://render.alipay.com/p/s/i/?scheme=${aliUrl}`;
      // // this.$goCopy(url)
      // this.url = url;
      // this.showCopy = true;
    },
    goOrderList() {
      // // 去订单列表
      // return new Promise((resolve) => {
      //   if (this.$env === "alipay") {
      //     resolve();
      //   } else {
      //     const aliUrl = `alipays%3A%2F%2Fplatformapi%2Fstartapp%3FappId%3D2021002110607982%26page%3Dpages%252ForderList%252Findex`;
      //     const url = `https://render.alipay.com/p/s/i/?scheme=${aliUrl}`;
      //     this.$goCopy(url);
      //   }
      // });
    },
    viewShow(val, ind) {
      console.log(val, ind, "view");
      uni.navigateTo({ url: `/pagesMy/viewLogistics/index?id=${val.id}` });
    },
    cancalOrder({ id }) {
      OrderAction.cancalOrder(id);
    },
    phone(phone, content) {
      // console.log(phone);
      OrderAction.phone(phone, content);
    },
    pay({ id, type, buyoutId }) {
      this.goOrderList().then(() => {
        OrderAction.pay(id).then(() => {
          this.$parent.getOrderList();
        });
      });
    },
    sign({ orderNumber }) {
      OrderAction.sign({ orderNumber, $env: this.$env });
    },
    payDetail({ id }) {
      this.goOrderList().then(() => {
        OrderAction.payDetail(id);
      });
    },
    commentList({ id }) {
      uni.navigateTo({ url: `/pagesMy/commentList/index?id=${id}` });
    },
    reorder({ goodsId }) {
      OrderAction.reorder(goodsId);
    },
    returnGoods({ id }) {
      uni.navigateTo({ url: `/pagesMy/orderReturn/index?id=${id}` });
    },
    rerentGoods({ id }) {
      uni.navigateTo({ url: `/pagesMy/orderRerent/index?id=${id}` });
    },
    buyoutGoods({ id }) {
      uni.navigateTo({ url: `/pagesMy/orderBuyout/index?id=${id}` });
    },
    billDetailGoods({ id }) {
      uni.navigateTo({ url: `/pagesMy/orderBillDetail/index?id=${id}` });
    },
    buyoutDescriptionTap({ id }) {
      uni.navigateTo({ url: `/pagesMy/buyoutDescription/index?id=${id}` });
    },
    // buyout({ id, type, buyoutId }) {
    //   this.goOrderList().then(() => {
    //     if (type === 2) {
    //       if (buyoutId) {
    //         OrderAction.pay(buyoutId, 3).then((result) => {
    //           if (resultCode === "6001") {
    //             // 中途取消
    //             this.$toast("您未支付买断金额，买断失败");
    //           } else {
    //             // 下单成功
    //             this.$goPagthis.$toast("你已支付买断金额，请联系商家完结订单");
    //           }
    //           this.$parent.getOrderList();
    //         });
    //       } else {
    //         this.$toast("买断申请中");
    //       }
    //     } else {
    //       OrderAction.buyout(id);
    //     }
    //   });
    // },
    auth() {
      OrderAction.auth();
    },
    goOrderDrtail(id) {
      console.log(id, "id");
      uni.navigateTo({ url: `/pages/orderInfo/index?id=${id}` });
    },
    faceAuth({ id }, index) {
      this.goOrderList().then(() => {
        OrderAction.faceAuth(id).then(() => {
          this.$emit("updateShow", index);
        });
      });
    },
    settle({ id, type }) {
      this.goOrderList().then(() => {
        OrderAction.pay(id, 4).then((result) => {
          if (result === "6001") {
            this.$toast("已取消支付", "error");
          } else {
            this.$toast("结算成功");
            this.$parent.getOrderList();
          }
        });
      });
    },
  },
};
</script>
<style lang="scss">
.orderData {
  width: 100vw;
  .list {
    width: 100%;
    height: 100%;
    padding: 0 12px;
    overflow: auto;
    .order-item {
      width: 100%;
      min-height: 201px;
      border-radius: 8px;
      margin-top: 7px;
      .title {
        height: 45px;
        width: 100%;
        padding: 0 15px;
        border-bottom: 1px solid #f5f5f5;
        .logo {
          width: 18px;
          height: 18px;
          border-radius: 50%;
        }
        .store-name {
          color: #3d3d3d;
          font-size: 14px;
          margin-left: 4px;
          line-height: 20px;
          .arrow {
            width: 6px;
            height: 12px;
            margin-left: 5px;
          }
        }
        .status {
          color: #0096ff;
          font-size: 14px;
          line-height: 20px;
          margin-left: auto;
        }
      }
      .content {
        padding: 10px 12.5px;
        width: 100%;
        min-height: 93px;
        .left {
          width: 125px;
          height: 93px;
          background-color: #f9f9f9;
          .pic {
            height: 80px;
            max-width: 125px;
          }
        }
        .right {
          margin-left: 8px;
          width: 217px;
          .goods-title {
            color: #333333;
            font-size: 14px;
            max-width: 210px;
            line-height: 20px;
          }
          .spec {
            color: #aaaaaa;
            font-size: 12px;
            line-height: 17px;
            margin-top: 6px;
          }
          .specss {
            display: flex;
            justify-content: space-between;
          }
          .all-rang {
            width: 210px;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 20px;
            margin-top: 6px;
            .num {
              margin-left: auto;
            }
          }
        }
      }
      .ping-tag {
        width: 100%;
        height: 24px;
        margin-bottom: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .pingtai {
        width: 100%;
        height: 30px;
        color: #3d3d3d;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background-color: rgb(224, 140, 140);
        .pingtai-lf {
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          .lf-img {
            width: 20px;
            height: 20px;
            margin-left: 20px;
            margin-right: 3px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }

      .action {
        padding: 20px 0;
        width: 100%;
        max-width: 100vw;
        height: 48px;
        overflow-x: scroll;
        overflow-y: hidden;
        .btns {
          width: fit-content;
          overflow-x: scroll;
          padding: 0 10px;
          min-width: 100%;
          .btn {
            width: 76px;
            height: 30px;
            line-height: 31px;
            text-align: center;
            color: #555555;
            font-size: 12px;
            border: 1px solid #e1e1e1;
            border-radius: 15px;
            margin-left: 5px;
            &.big {
              width: 104px;
            }
            &:last-child {
              background-color: #0096ff;
              color: #fff;
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>
